import React, { useState } from 'react'
import './index.css'

export default function Item({ todo, done, id, todoList, setTodoList }) {
  // console.log(todo, 1, done, 2, id, 3, todoList, 4, setTodoList);
  //两个函数实现的功能差不多,可以合并(函数柯里化)

  const [isActive, setIsActive] = useState(false)
  const mouseHandle = (bool) => {
    return () => {
      setIsActive(bool)
    }
  }

  const checkChangeHandle = (e) => {
    // console.log(id);
    // console.log(e.target.checked);
    // console.log(todoList);
    //当前选择框的checked是false,需要修改当前选中框的checked,但是checked受state控制
    //当点击时,e.target.checked期望的值希望是true,所以打印一直是true,需要修改state,修改的方法
    //1.把这个值传给App,在App中修改,2.把todoList和settodoList传下来,在这个位置修改todoList
    //当点击的这个input的id和todolist的元素的id对的上的时候把这个对象的done改成e.target.checked(遍历todoList,如果里面有一个元素的id对的上,就修改)
    //返回一个新数组,把新数组给setTodoList
    const newTodo = todoList.map((item) => {
      if (item.id === id) {
        item.done = e.target.checked
      }
      return item
    })
    setTodoList(newTodo)

 
  }

     //给button绑定点击事件,点击删除能删除这个对象
     const deleteHandle = () => {
      console.log(id);
      //删除数组中的某个元素,用过滤
      const newTodo = todoList.filter((item) => {
        //filter的判断是每个元素进来,return后面的结果如果是true,这个item就能出去,如果是false,这个item就出不去
        return item.id !== id
      //  if(item.id !== id){
      //   return item
      //  }
        
      })
      console.log(newTodo);

      setTodoList(newTodo)
  

    }

  return (
    <li
      onMouseEnter={mouseHandle(true)}
      onMouseLeave={mouseHandle(false)}
      className={isActive ? 'active' : ''}>
      <label>
        <input type="checkbox" checked={done} onChange={checkChangeHandle} />
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" onClick={deleteHandle} style={{ display: isActive ? 'block' : 'none' }}>删除</button>
    </li>
  )
}
